<template>
  <div class="search_item">
    <div>
      <form-tpl
        :formRule = formRule
        @formsubmit = 'onSubmit'
        btntext = "查询商品"
      ></form-tpl>
    </div>
    <div class="mb20">
      <!-- <el-button type="primary">批量下架</el-button> -->
    </div>
    <div class="mb20">
      <el-table
        v-loading="loading"
        :data="pageData.list"
        :highlight-current-row = 'false'
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <!-- <el-table-column
          type="selection"
          width="55">
        </el-table-column> -->
        <el-table-column
          label="商品编号"
          prop='productId'>
        </el-table-column>
        <el-table-column
          label="商品名称"
          width="300"
          prop='productTitle'>
        </el-table-column>

        <el-table-column
          label="商品规格"
          prop='skuProperty'>
        </el-table-column>
        <el-table-column
          label="供应商"
          prop='providerName'>
        </el-table-column>
        <el-table-column
          label="当前状态"
        >
          <template scope='scope'>
              <p>{{scope.row.productStatus  | productStatus}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width='360'
        >
          <template scope='scope'>
            <el-button @click="productedit(scope.row)">编辑</el-button>
            <el-button @click="productdown(scope.row)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
        <tour-pagination
          :page = page
          :count = pageData.count
          :size = size
          @change = 'pagechange'
        ></tour-pagination>
      </div>
  </div>
</template>
<script>
  import formTpl from 'components/formtpl.vue'
  import tourPagination from 'components/tourPagination.vue'
  import {
    setDefaultFromQuery
  } from 'src/model/form.translate.js'
  import {
    GetNoStockGoodsList
  } from 'src/api/index.js'
  import {
    noStockGoodsMoedl
  } from 'src/model/goodsModel.js'
  import {
    valueTypeTransformAll
  } from 'util'
  export default {
    data () {
      let queryParam = this.$store.state.route.query
      let page = this.$store.state.route.query.page || 1
      return {
        formRule: setDefaultFromQuery(noStockGoodsMoedl.model, queryParam),
        page: Number(page) || 0,
        pageData: '',
        size: 20,
        params: {},
        loading: false,
        tableLabel: ['商品信息', '供应商', '剩余库存', '积分策略', '优惠活动', '上架时间', '当前状态', '操作'],
        curTableLabel: ['商品信息', '供应商', '剩余库存', '积分策略', '优惠活动', '上架时间', '当前状态', '操作'],
        multipleSelection: []
      }
    },
    created () {
      this.setPageData()
      this.params = this.$store.state.route.query
    },
    methods: {
      goPage () {
        // let query = {}
        // 此处有坑，...结构赋值表现有问题
        // for (var key in this.params) {
        //   if (Array.isArray(this.params[key])) {
        //     query[key] = [...this.params[key]]
        //   } else {
        //     query[key] = this.params[key]
        //   }
        // }
        // query.page = this.page
        // setTimeout(() => {
        //   this.$router.push({
        //     path: '/goods/listOfNostock',
        //     query: {
        //       ...this.params,
        //       page: this.page
        //     }
        //   })
        // }, 0)
        this.setPageData()
      },
      onSubmit (data) {
        let params = {}
        for (let key in data) {
          if (data[key] !== '') {
            params[key] = data[key]
          }
        }
        this.params = params
        this.page = 1
        this.goPage()
      },
      setPageData () {
        let params = this.params
        if (params['productStatus'] && params['productStatus'].indexOf('all') > -1) {
          params['productStatus'] = []
        }
        this.loading = true
        let curParams = valueTypeTransformAll(params, noStockGoodsMoedl.model)
        GetNoStockGoodsList({
          ...curParams,
          size: this.size,
          page: this.page
        }).then((res) => {
          this.loading = false
          if (res.data.code !== 100) {
            this.$alert(res.data.message)
            return
          }
          this.pageData = res.data.data
        })
      },
      pagechange ({page, size}) {
        this.page = page
        this.size = size
        this.goPage()
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      productdown (params) {
        this.$productdown({
          productid: params.productId,
          name: params.title,
          success: () => {
            this.setPageData()
          }
        })
      },
      productedit (params) {
        this.$router.push({
          path: '/goods/editGoods',
          query: {
            productId: params.productId
          }
        })
      }
    },
    components: {
      formTpl,
      tourPagination
    }
  }
</script>
<style>
  .form_wrap{
    margin-top: 20px;
  }
</style>
